import React, {Component} from "react";
import { Row, Col, Button, Input, Card, Pagination, Table,Popconfirm, message } from 'antd'
import { ArrowLeftOutlined, SearchOutlined, PlusCircleOutlined, } from '@ant-design/icons'

import { getFoodList, deleteFood } from '../../api/food'

class Food extends Component {

  state = {
    params: {
      name: '',
      pageSize: 6,
      pageNum: 1,
      flavor: ''
    },
    total: '',
    keywords: '',
    Issearch:false,
    foodList: [],
    searchList: [],
    columns:  [
      {
        title: '美食名称',
        dataIndex: 'fname',
        align: 'center' ,
        width: 120,
        render: (_,record) => {
          return <div className="textHd2">{record.fname}</div>
        }
      },
      {
        title: '美食食材',
        dataIndex: 'ingredients',
        align: 'center' ,
        width: 180,
        render: (_,record) => {
          return <div className="textHd2">{record.ingredients}</div>
        }
      },
      {
        title: '口味',
        dataIndex: 'flavor',
        align: 'center',
        width: 200 ,
        render: (_,record) => {
          return <div className="textHd2">{record.flavor}</div>
        }
      },
      {
        title: '做法',
        dataIndex: 'practice',
        align: 'center',
        width: 200 ,
        render: (_,record) => {
          return <div className="textHd2">{record.practice}</div>
        }
      },
      {
        title: '美食链接',
        dataIndex: 'furl',
        align: 'center'  ,
        width: 240,
        render: (_,record) => {
          return <div className="textHd2">{record.furl}</div>
        }
      },
      {
        title: '操作',
        dataIndex: 'operation',
        width: 120,
        render: (text,record) => {
          return  (
            <div style={{display: 'flex', justifyContent: 'space-around', alignItems: 'center'}}>
                 <Button onClick={() => this.editData(record.fid)} className="uploadBtn">查看</Button>
              <Popconfirm title="改操作将会有就删除这条数据, 是否继续" onConfirm={() => this.deleteData(record.fid)} okText="确认" cancelText="取消">
              <Button className="deleteBtn">删除</Button>
              </Popconfirm>
            </div>
          )
            }
          }
    ]
  }
   componentDidMount () {
      this.getFoodList()
    }

    // 获取美食列表
    getFoodList = async () => {
      const res = await getFoodList(this.state.params)
      console.log(res)
      const foodList = res.data.data
      foodList.map((item, value) => item.key = value)
      const total = res.data.total
      this.setState({foodList, total})
    }

    // 分页页面跳转
  paginationChange = (e) => {
    const params = {...this.state.params, pageNum: e }
    this.setState({params}, () => {
     this.getFoodList()
    })
  }

  // 监听enter点击事件
  onKeyup = (e) => {
    if(e.keyCode === 13) {
      this.getSearch()
    }
  }

  // 返回
   back = () => {
     this.setState({Issearch: false, params: {...this.state.params, name: ''}, keywords: ''}, () => {
       this.getFoodList()
     })
}
  // 开始搜索
  getSearch =  () => {
    if (this.state.keywords) {
      this.setState({params: {...this.state.params, name:  this.state.keywords}}, async () => {
        const res  = await getFoodList(this.state.params)
        const searchList = res.data.data
        searchList.map((item, value) => item.key = value)
        const total = res.data.total
        this.setState({searchList, Issearch: true, total})
      })
    } else {
      message.warn('搜索内容不能为空')
    }
  
  }

  // 删除美食
  deleteData = async(id) => {
    const res = await deleteFood(id)
    if (res.code === 200) {
      message.success('删除数据成功')
    } else {
      message.error('删除数据失败')
    }
    this.getFoodList()
  }
  // 编辑美食
  editData = (id) => {
    this.props.history.push({pathname: '/home/foods_details', query: {id}})
  }

  // 增加美食
  addData = () => {
    this.props.history.push({pathname: '/home/foods_details', query: {id: ''}})
  }

  render() {
    const {Issearch, foodList, searchList, keywords, columns, params, total } = this.state
    return (
        <div>
            <Row style={{ height: '46px', display: "flex", alignContent: "center",alignItems: 'center'}}>
      <Col span={3}>{Issearch? <Button type="ghost" icon={<ArrowLeftOutlined />} onClick={() => this.back()} className="backBtn">返回</Button> : null }</Col>
      <Col span={6}><Input placeholder="输入美食名称搜索美食" prefix={<SearchOutlined />} value={keywords} onChange={(e) => {this.setState({keywords: e.target.value})}} onKeyUp={(e) => this.onKeyup(e)}></Input></Col>
      <Col span={2} offset={1}><Button type="primary" icon={<SearchOutlined />} onClick={() => this.getSearch()}>搜索</Button></Col>
      <Col span={2}><Button icon={<PlusCircleOutlined />} onClick={() => { this.addData()}} className="successBtn">增加</Button></Col>
    </Row>
    <Card style={{marginTop: '30px'}}>
      {Issearch ?  (<Table
          pagination={false}
          bordered
          dataSource={searchList}
          columns={columns}
        />) :  (<Table
          pagination={false}
          bordered
          dataSource={foodList}
          columns={columns}
        />)
  }
    </Card>
    <div className="pagination">
       <Pagination showQuickJumper current={params.pageNum} total={total} onChange={this.paginationChange} pageSize={params.pageSize} />
    </div>
      </div>
    );
  } 
}

export default Food;